let constructor_that;
function Banner($box) {
    constructor_that = this;
    this.box = document.querySelector($box);
    this.ul = this.box.querySelector('ul');
    this.arrow_left = this.box.querySelector('.arrow_left');
    this.arrow_right = this.box.querySelector('.arrow_right');
    this.dots = this.box.querySelectorAll('.dot_box>span');
    this.dot_box = this.box.querySelector('.dot_box');
    this.index = 1;
    this.lastIndex = 1;

    this.url = 'http://studentback.dfbuff.top/getMethod';
    this.params = {
        type: '图片'
    }

    // 调用功能模块：
    this.getAjax();
    this.setFirsAndLast();
    this.getFun();
}

Banner.prototype.setFirsAndLast = function () {
    this.ul.insertBefore(this.ul.lastElementChild.cloneNode(true), this.ul.firstElementChild);
    this.ul.appendChild(this.ul.children[1].cloneNode(true));

    this.ul.style.transform = `translateX(-${this.index}00%)`;
    // 设置延时定时器 (克隆完毕之后, 300ms恢复过渡效果)
    setTimeout(function () {
        this.ul.style.transition = "0.2s ease-in-out";
    }, 300);
}

Banner.prototype.getAjax = function getAjax() {
    // 使用Promise封装Ajax
    Ajax('GET', this.url, this.params).then(
        function (res) {
            for (let k of res['result']) {
                constructor_that.ul.innerHTML += `<li><a href="javascript:void(0)"><img src="${k.content}" /></a></li>`
            }
            constructor_that.li_lis = constructor_that.box.querySelectorAll('li')

            constructor_that.li_lis.forEach((item, index) => {
                constructor_that.dot_box.innerHTML += `<span class="dot" data-index="${index + 1}"></span>`
            })
            constructor_that.dots = constructor_that.box.querySelectorAll('.dot_box>span');

            constructor_that.dot_box.firstElementChild.classList.add('dotActive');
        }
    )
}



// 设置所有绑定监听事件
Banner.prototype.getFun = function () {
    this.li_list = this.box.querySelectorAll('li')
    this.arrow_left.addEventListener('click', this.getArrowLeft);
    this.arrow_right.addEventListener('click', this.getArrowRight);
}

// 左箭头移动功能
Banner.prototype.getArrowLeft = function () {
    constructor_that.ul.style.transform = `translateX(-${--constructor_that.index}00%)`;
    if (constructor_that.index === 0) {
        console.log('到达第一张');
        constructor_that.index = constructor_that.li_list.length
        // transitionend事件，用于检测过渡效果是否完成

    }
}

// 右箭头移动功能
Banner.prototype.getArrowRight = function () {
    constructor_that.ul.style.transform = `translateX(-${++constructor_that.index}00%)`;
    if (constructor_that.index === constructor_that.li_list.length + 1) {
        console.log('达到最后一张');
        // 回到第一张
        constructor_that.index = 1;
        // transitionend事件，用于检测过渡效果是否完成

    }
}

new Banner('.box');
